import IconDouyin from '@/components/icon/IconDouyin';
import IconToutiao from '@/components/icon/IconToutiao';
import IconWeibo from '@/components/icon/IconWeibo';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Col, Row, Space, theme } from 'antd';
import React, { useState } from 'react';
import TableRecord from '../record/TableRecord';
import TableRecordWeChat from '../record/TableRecordWeChat';
import TableHotRank from './TableHotRank';

interface PageContainerHotProps {}

const PageContainerHot: React.FC<PageContainerHotProps> = ({}) => {
  const hotRankTypes = [
    {
      icon: <IconWeibo width={24} height={24} />,
      name: '微博热搜',
      type: 1,
    },
    {
      icon: <IconDouyin width={24} height={24} />,
      name: '抖音热榜',
      type: 2,
    },
    {
      icon: <IconToutiao width={24} height={24} />,
      name: '头条热搜',
      type: 4,
    },
  ];
  const [pageContainerTab, setPageContainerTab] = useState('1');
  const { token } = theme.useToken();

  return (
    <>
      <PageContainer
        header={{
          title: '热搜热榜',
          breadcrumb: {
            items: [],
          },
        }}
        tabList={[
          {
            tab: '上榜情况',
            key: '1',
          },
          {
            tab: '实时热搜',
            key: '2',
          },
        ]}
        onTabChange={(value) => {
          setPageContainerTab(value);
        }}
      >
        {pageContainerTab === '1' ? (
          <Row>
            {/* <Col span={6}>
              <ProCard title="统计数据" colSpan="30%">
                <Result icon={<SmileOutlined />} title="正在开发中!" />
              </ProCard>
            </Col> */}
            <Col span={24}>
              <>
                <ProCard
                  bodyStyle={{
                    padding: 0,
                  }}
                  tabs={{
                    items: [
                      ...hotRankTypes.map((item) => {
                        return {
                          label: item.name,
                          key: `tab${item.type}`,
                          children: (
                            <TableRecord
                              onRefurbish={function (): void {}}
                              hotType={item.type}
                              hotIcon={item.icon}
                              hotName={item.name}
                              hotCity={0}
                            />
                          ),
                        };
                      }),
                      {
                        label: `微信榜单`,
                        key: 'tab5',
                        children: <TableRecordWeChat onRefurbish={function (): void {}} />,
                      },
                    ],
                  }}
                />
              </>
            </Col>
          </Row>
        ) : (
          <>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Space direction={'vertical'}>
                  {hotRankTypes.map((item, index) => {
                    return (
                      <TableHotRank
                        hotIcon={item.icon}
                        hotName={`${item.name} - 全国`}
                        hotType={item.type}
                        hotCity={0}
                        onRefurbish={function (): void {}}
                      />
                    );
                  })}
                </Space>
              </Col>
              <Col span={12}>
                <Space direction={'vertical'}>
                  {hotRankTypes.map((item, index) => {
                    return (
                      <TableHotRank
                        hotIcon={item.icon}
                        hotName={`${item.name} - 重庆`}
                        hotType={item.type}
                        hotCity={1}
                        onRefurbish={function (): void {}}
                      />
                    );
                  })}
                </Space>
              </Col>
            </Row>
          </>
        )}
      </PageContainer>
    </>
  );
};

export default PageContainerHot;
